<template>
  <div class="channel-edit">
    <!-- 当前登陆用户已经订阅的频道 -->
    <div class="channel">
      <van-cell title="我的频道" :border="false">
        <!-- @click="editing = !editing"切换编辑状态 -->
        <van-button  @click="editing = !editing" size="mini" type="info"> {{editing ? '取消' : '编辑'}}</van-button>
      </van-cell>
      <!-- 高亮显示我的频道里的当前频道，传递频道下标 :class="{'cur': idx === 'activeIndex'}"-->
      <van-grid>
        <van-grid-item
        v-for="(item, idx) in channels"
        :key="item.id"
        @click="hClickMyChannel(item)"
        :class="{'cur': idx === activeIndex}">
          <span>{{item.name}}</span>
          <!-- 推荐频道的下标是0，它是不能被删除的 -->
          <van-icon v-show="editing && idx!==0" name="cross" class="btn"></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
     <!-- 当前登陆用户没有订阅的频道
     系统中所有频道列表 - 我的频道 = 可选频道
     -->
    <div class="channel">
      <van-cell title="可选频道" :border="false"></van-cell>
      <van-grid>
        <van-grid-item
        v-for="item in cRecommendChannels"
        :key="item.id"
        @click="hAddChannel(item)">
          <span>{{item.name}}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getAllChannels, addChannel, deleteChannel } from '@/api/channel.js';
export default {
  name: 'ChannelEdit',
  // 对两个props不做任何限制，不限类型，不限是否传入，由于props是从组件之外获取的数据，不严谨，要对输入做限制
  // props: ['channels', 'activeIndex'], // 父传子：把当前订阅频道传给频道编辑组件
  props: {
    channels: {
      type: Array, // 必须传入数组
      required: true, // 必须要传入
      default: () => { // 默认值
        // 对于非基本数据类型，默认值要通过函数返回
        return [];
      }
    },
    activeIndex: {
      type: Number,
      required: true,
      default: 0
    }
  },
  data () {
    return {
      editing: false, // 是否处于编辑状态
      allChannels: [] // 全部频道不包含推荐频道
    };
  },
  created () {
    this.loadAllChannels();
  },
  computed: {
    cRecommendChannels () {
      // 计算属性保存可选频道
      // 可选频道 = 系统中所有频道列表 - 我的频道（已经订阅的）
      // 思路：对大数组进行过滤，只保存在小数组没有出现的值。
      const arr = this.allChannels.filter(channel => {
        // 找不到（idx为-1）则返回保留
        const idx = this.channels.findIndex(item => item.id === channel.id);
        return idx === -1;
      });
      return arr;
    }
  },
  methods: {
    // 用户在可选频道上点击了某一项
    async hAddChannel (channel) {
      console.log(addChannel);
      // 一、组装数据，改造成接口参数要求的格式
      // 1.把当前点击的频道放到已选频道的后面
      const curChannelsNow = [...this.channels, channel];
      // 2.后端要求不要传推荐频道(第一个)
      curChannelsNow.splice(0, 1);
      // 3.把数据格式[{id,name},...]改成[{id,seq},...]
      // map方法
      // 返回一个新数组，这个新数组中的每一项是对原数组中每一项调用某个函数而得到的。
      const channels = curChannelsNow.map((item, idx) => {
        return { id: item.id, seq: idx };
      });
      // 二、调用接口
      const result = await addChannel(channels);
      console.log(result);
      // 三、更新页面,修改已订阅频道
      this.channels.push(channel);
      // 1.它给我的频道中添加了一项，导致视图变化
      // 2.由于可选频道是计算属性，依赖于channels
      // 3.它会直接修改父组件中的频道列表，原因是父组件把channels当作props传入的，
      // 由于这个props是引用数据类型，所以在子组件中的修改会直接影响父组件中的数据
    },
    // 用户点击了我的频道中的某一项
    async hClickMyChannel (channel) {
      if (this.editing) {
        if (channel.id === 0) return; // 推荐频道不能删除
        // 编辑状态下点击
        // 1.请求接口，不再订阅当前频道
        // 2.更新视图，从当前频道列表中删除这一项
        console.log('在编辑状态下点击', channel);
        await deleteChannel(channel.id);
        const idx = this.channels.findIndex(item => item.id === channel.id);
        if (idx !== -1) {
          this.channels.splice(idx, 1);
        }
        // 如果当前删除的频道在激活频道之前，则要把激活频道的下标-1
        if (idx < this.activeIndex) {
          this.$emit('updateCurIndex', this.activeIndex - 1);
        }
      } else {
        // 非编辑状态下点击
        // 1.整个频道管理弹层收起来
        // 2.在父组件index.vue中跳转到当前频道
        this.$emit('updateCurChannel', channel);
        // 3.关闭频道编辑弹层
        this.$emit('close');
      }
    },
    async loadAllChannels () {
      const result = await getAllChannels();
      console.log('所有频道', result);
      this.allChannels = result.data.data.channels;
    }
  }
};
</script>

<style lang="less" scoped>
  .channel{
    padding:15px;
    font-size:14px;
    // 高亮显示
    .cur{
      color:red;
      font-weight:bold;
    }
  }
  .btn {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 24px;
}
</style>
